<template>
	<view class="content">
		<view class="time-settings-container">
			<!-- 标题 -->
			<view class="header">
				<text class="title">营业时间设置</text>
				<text class="subtitle">请设置您的营业时间段</text>
			</view>

			<!-- 时间设置区域 -->
			<view class="time-settings">
				<!-- 开始时间 -->
				<view class="time-setting-item">
					<text class="label">开始时间</text>
					<view class="time-picker">
						<picker mode="time" :value="startTime" @change="onStartTimeChange">
							<view class="picker-view">{{ startTime || '请选择' }}</view>
						</picker>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>

				<!-- 分隔线 -->
				<view class="divider"></view>

				<!-- 结束时间 -->
				<view class="time-setting-item">
					<text class="label">结束时间</text>
					<view class="time-picker">
						<picker mode="time" :value="endTime" @change="onEndTimeChange">
							<view class="picker-view">{{ endTime || '请选择' }}</view>
						</picker>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips">
				<u-icon name="info-circle" color="#999" size="28"></u-icon>
				<text>设置营业时间后，客户只能在该时间段内预约</text>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-button">
				<u-button 
					type="primary" 
					@click="submitTimeSettings"
					:loading="loading"
					shape="circle"
				>保存设置</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/util/request'
export default {
	data() {
		return {
			deviceId: 0,
			loading: false,
			startTime: '', // 营业开始时间
			endTime: '', // 营业结束时间
		}
	},
	onLoad() {
		this.loading = true
		const systemInfo = uni.getSystemInfoSync();
		let deviceId = systemInfo.deviceId;
		this.deviceId = parseInt(deviceId);
		this.fetchTimeSettings();
	},
	methods: {
		// 营业开始时间改变时的回调方法
		onStartTimeChange(e) {
			this.startTime = e.target.value
		},
		// 营业结束时间改变时的回调方法
		onEndTimeChange(e) {
			this.endTime = e.target.value
		},
		submitTimeSettings() {
			if (!this.startTime || !this.endTime) {
				uni.showToast({
					title: '请选择完整的时间段',
					icon: 'none'
				});
				return;
			}

			this.loading = true;
			request({
				url: '/setting/setting',
				method: 'PUT',
				data: {
					businessStartTime: this.startTime,
					businessEndTime: this.endTime
				}
			}).then(res => {
				this.loading = false;
				if(res.code === 200){
					uni.showToast({
						title: '设置成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '设置失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				this.loading = false;
				uni.showToast({
					title: '设置失败',
					icon: 'none'
				});
			});
		},
		fetchTimeSettings() {
			request({
				url: '/setting/setting/queryTime',
				method: 'GET',
			}).then(res => {
				if (res.data && res.data.businessStartTime && res.data.businessEndTime) {
					this.startTime = res.data.businessStartTime;
					this.endTime = res.data.businessEndTime;
				} else {
					this.startTime = '08:00';
					this.endTime = '18:00';
				}
				this.loading = false;
			}).catch(err => {
				this.startTime = '08:00';
				this.endTime = '18:00';
				this.loading = false;
				uni.showToast({
					title: '获取设置失败',
					icon: 'none'
				});
			});
		}
	}
}
</script>

<style lang="scss">
.content {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.time-settings-container {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	
	.header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.subtitle {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.time-settings {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}
	
	.time-setting-item {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.label {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
		
		.time-picker {
			display: flex;
			align-items: center;
			padding: 15rpx 20rpx;
			background: #f8f8f8;
			border-radius: 8rpx;
			
			.time-text {
				font-size: 30rpx;
				color: #666;
				margin-right: 10rpx;
			}
		}
	}
	
	.divider {
		height: 1rpx;
		background: #eee;
		margin: 0 20rpx;
	}
	
	.tips {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 8rpx;
		margin-bottom: 40rpx;
		
		text {
			font-size: 26rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
	
	.submit-button {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}
}

// 点击效果
.time-picker {
	&:active {
		opacity: 0.7;
	}
}
</style>